/*
 * @Description: 流程图
 * @Autor: codeBo
 * @Date: 2025-04-18 13:13:48
 * @LastEditors: lihaibo@shanshu.ai
 * @LastEditTime: 2025-05-20 10:23:30
 */
import { defineStore } from 'pinia'
import to from 'await-to-js'
import { useVueFlow } from '@vue-flow/core'
import { getDiviceProcessApi, editDiviceProcessApi } from '@/api/outputData'
import { VxeUI } from 'vxe-table'

// 接口设计： { data: [] 后端数据列表, nodes: JSON || null, 前端存储，用户编辑以后存储到这里， 已包含data}
/**
 * 流程图逻辑
 * 1、初始化、通过传入的参数请求数据，先确认是否之前是否有过修改， 如果有过修改，应该使用之前后端存储的数据处理好以后直接渲染， 如果没有过修改，证明后端接口没有保存过这个数据，使用后端默认数据处理好以后初始化数据。
 * 2、pinia 存储 节点列表、编辑状态、loading状态、modelRef (用于获取画布实例)
 * 3、initNodes 存储初始化的节点列表，取消编辑的时候，使用这个进行恢复，当保存成功以后，使用更新以后的值进行覆盖
 * 4、用户第一次保存以后，第二次再打开页面，就不会使用后端存储的数据恢复，而是使用前端存储在后端的数据进行恢复，如果想同步后面用户对原始数据的修改，对接产品确认是否新增按钮主动同步，此时还需删除前端存储在后端的数据
 * 
 */
const useDeviceFlowStore = defineStore('flow', {
  state: (): { nodes: any[], flowKey: string, isEdit: boolean, loading: boolean, modelRef: any, initNodes: any, vueFlowInstance: any, caseId: string } => ({
    nodes: [], // 节点列表 绑定更新
    flowKey: 'vue-flow--save-restore', // 本地存储 模拟接口数据存取,
    isEdit: false,
    loading: false,
    modelRef: null,
    initNodes: '', // 初始化节点数据 用于重置 字符串格式
    vueFlowInstance: null, // 添加这个状态，用于获取实例
    caseId: '',
  }),
  getters: {
  },
  actions: {
    initRef(ref, caseId){
      this.modelRef = ref
      this.caseId = caseId
    },
    // 清空或重置数据
    reset(){
      this.nodes = []
      this.isEdit = false
      this.modelRef = null 
      this.initNodes = ''
      this.vueFlowInstance = null
    },
    async initStore(){
      this.loading = true
      this.isEdit = false // 重置编辑状态
      const [err, res] = await to(getDiviceProcessApi({ caseId: this.caseId }))
      this.loading = false
      if(err){
        console.log('err',err);
        return
      }
      const { data, detail} = res
      // 初始化，应该请求接口， 接口中有之前保存过的， 回复保存的， 没有保存过的， 用后端给的列表数据初始化，前端如果保存过数据， 使用JSON字符串的形式直接存储到后端，拿到以后转换成对象，使用其中的 nodes 赋值。 nodes 即为数据数组

      if(detail){
        let flow = null
        flow = JSON.parse(detail)
        if(flow){
        // 有保存过数据，没有使用后端存储的数据
          this.nodes = flow
          this.initNodes = detail
        }
      }else
      if(data && data.length){
        const newData = this.transform(data)
        this.nodes = newData
        this.initNodes = JSON.stringify(newData)
      }
      this.vueFlowInstance = useVueFlow()
    },
    // 改造后端数据 增加位置信息 defaultshow
    transform(data){  
      const xspacing = 338;
      const yspacing = 152;
      const itemsPerRow = 4;
      const iconMapping = ['one', 'two', 'three', 'four', 'five', 'six', 'seven'];
      return  data.map((item,index) =>{
        const { deviceCode, deviceName} = item
        const row = Math.floor(index / itemsPerRow);
        const col = index % itemsPerRow;
        // 计算当前下标对应的 icon
        const iconIndex = index % 7; // 取模得到 0~6
        const icon = iconMapping[iconIndex];
        return {
          id: deviceCode,
          type: 'defaultshow',
          // draggable: false,  // 禁用拖拽，避免相互影响，暂无其他方案
          data: {
            label: deviceName,
            icon,
            ...item
          },
          zIndex:5,
          position: {
            x: col * xspacing,
            y: row * yspacing
          }
        }
      })
    },
    // 打开编辑状态
    openEdit(){
      this.isEdit = true
    },
    // 关闭编辑状态
    closeEdit(){
      this.isEdit = false
    },
    // 保存事件, 请求接口保存成功 刷新store， 从新初始化 nodes 或直接覆盖 nodes
    async saveNodeHandler(params){
      this.loading = true
      const [err,res] = await to(editDiviceProcessApi({
        caseId: this.caseId,
        groupDetail: JSON.stringify(params)
      }))  
      this.loading = false
      if(err || !res){
        console.log('err',err);
        return
      }
      // 保存成功 
      VxeUI.modal.message({ status: 'success', content: '保存成功！' })
      this.nodes = params
      this.initNodes = JSON.stringify(params)
    },
    // 取消事件
    cancelHandler(){
      console.log('this.nodes',this.nodes);
    },
    // 重置数据
    resetData(){
      const onConfirm = async () => {
        this.loading = true
          const [err,res] = await to(editDiviceProcessApi({
            caseId: this.caseId,
            groupDetail: ''
          }))  
        this.loading = false
        if(err || !res){
          console.log('err',err);
          return
        }
        VxeUI.modal.message({ status: 'success', content: '重置成功！' })
        this.initStore()
      }
      VxeUI.modal.confirm({
        className: 'common-dialog-rest',
        content: `确认重置到最新装置数据并清空当前编辑状态吗?`,
        onConfirm,
      })
    }
  }
})

export default useDeviceFlowStore